<template>
  <view class="liveList">
    <view class="liveheader flex flex-align">
      <view @click="changeType(0)" class="flex-1 flex flex-align flex-center" :class="{text:parme.type==0}">直播列表</view>
      <view @click="changeType(1)" class="flex-1 flex flex-align flex-center" :class="{text:parme.type==1}">回放列表</view>
    </view>
    <view style="height: 100rpx;"></view>
    <view class="list" v-for="(item,index) in dataList" :key="index" v-if="dataList" @click="goLive(item)">
      <view class="left flex">
        <image :src="item.cover"  mode="scaleToFill" />
        <view class="flex flex-direction flex-bt">
          <view>
            <view class="name one-omit">{{item.name}}</view>
            <view class="miaoshu one-omit">{{ timestampToDateJian(item.start_time*1000) }} 开播</view>
          </view>
          <view class="flex flex-align flex-bt">
            <view class="text flex flex-align">
              <image :src="item.status==1?'/static/nodata/live02.png':'/static/nodata/live01.png'" mode="scaleToFill"  />
              <view>{{item.status==1?'待开播':'直播中'}}</view>
            </view>
            <!-- <view class="headerImg">
              <image src="@/static/logo.png" mode="scaleToFill" />
              <image src="@/static/logo.png" mode="scaleToFill" />
              <image src="@/static/logo.png" mode="scaleToFill" />
            </view> -->
          </view>
        </view>
      </view>
    </view>
    <view class="nodata" style="padding-top: 15vh;" v-else>
      <noData acImg="/static/nodata/noZiti.png" content="暂无数据" width="400rpx" color="#969799"></noData>
    </view>
  </view>
</template>

<script setup lang="ts">
import { roomList } from '@/api/user';
import { timestampToDateJian } from '@/utils/tools';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import noData from '@/components/noData.vue';
onLoad(() => {
  getList()
})
const parme = ref({
  page:1,
  size:10,
  type:0,
  show:0,
})
const dataList =ref<Recordable>([])
function getList(){
  uni.showLoading({
    title: '加载中',
    mask: true,
  })
  roomList(parme.value).then((res:any)=>{
    if(parme.value.page==1){
      dataList.value = res
    }else{
      dataList.value = dataList.value.concat(res)
    }
  })
}
function changeType(type:number){
  parme.value.type = type
  parme.value.page = 1
  getList()
}
function goLive(item:any){
  uni.navigateTo({
    url: '/pages/live/zhibo?zhibo_id='+item.id
  })
}
</script>

<style lang="scss" scoped>
.liveList{padding: 30rpx;
  .list{background: #fff;padding:20rpx;border-radius:20rpx;margin-bottom:30rpx;
    .left{
      image{width: 170rpx;height: 170rpx;border-radius: 10rpx;}
      .flex-direction{margin-left: 20rpx;
        .miaoshu{color: #969799;margin-top: 10rpx;font-size: 24rpx;width: 440rpx;}
        .name{font-size: 28rpx;color: #333;width: 440rpx;font-weight: bold;}
        .text{font-size: 32rpx;color: #FE4927;margin-top: 10rpx;
          image{width: 32rpx;height: 32rpx;margin-right: 10rpx;}
          view{font-size: 24rpx;color: #969799;}
          .red{color: #FE7431;font-weight: bold;}
        }
        .headerImg{
         image{width: 50rpx;height: 50rpx;border-radius: 50%;margin-right: -16rpx;}
        }
      }
    }
 }
}
.liveheader{text-align: center;margin-bottom: 30rpx;position: fixed;background: #F5F6F7;
  top: 0;left: 0;width: 100%;padding: 30rpx 30rpx 20rpx;box-sizing: border-box; 
  z-index: 1;
  .flex-1.text{font-size: 26rpx;color: #fff;background: #FE7431;}
  .flex-1{font-size: 26rpx;color: #333;font-weight: bold;height: 70rpx;background: #fff;border-radius: 10rpx;}
  .flex-1:last-child{margin-left: 20rpx;}

}
</style>